<template>
  <div>
    <a-modal
      :visible="showModal"
      :maskClosable="false"
      :keyboard="!formModal.loading"
      :closable="!formModal.loading"
      :title="'会议计划编制'"
      :okText="'提交'"
      width="900px"
      :destroyOnClose="true"
      @cancel="cancelSub"
      centered
    >

      <a-form-model
        class="flex-model-form"
        ref="addForm"
        :model="formModal.form"
        :rules="formModal.rules"
      >
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item
              label="年度"
              prop="year"
            >
              <a-date-picker
                :mode="'year'"
                @panelChange="yearChange"
                v-model="formModal.form.year"
                format="YYYY"
                valueFormat="YYYY"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
              label="编制单位"
              prop="unitId"
            >
              <SelectCompanyAndProject
                disabled
                :autoSelect="true"
                v-model="formModal.form.unitId"
                @onSelectChange="formModal.form.unitName = $event.name"
              ></SelectCompanyAndProject>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item
              label="计划参与部门"
              prop="deptId"
            >
              <SelectDepartment
                placeholder="请选择计划参与部门"
                mode="multiple"
                v-model="formModal.form.deptId"
                :form="formModal.form"
                :isObj="false"
                keyValue="unitId"
                labelInValue
                @change="reserveDeptChange"
                @getList="checkAll"
              ></SelectDepartment>
              <!-- <a-select
                  v-model="formModal.form.deptId"
                  mode="multiple"
                  style="width: 100%;"
                  placeholder="请选择部门"
                >
                  <a-select-option style="text-align: left;" v-for="i in 25" :key="(i + 9).toString(36) + i">
                    {{ (i + 9).toString(36) + i }}
                  </a-select-option>
                </a-select> -->
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>

      <template slot="footer">
        <a-button
          :disabled="formModal.loading"
          key="back"
          @click="cancelSub"
        >
          取消
        </a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="formModal.loading"
          @click="submitForm"
        >
          提交
        </a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
import SelectCompanyAndProject from '@/components/Select/SelectCompanyAndProject.vue'
import SelectDepartment from '../components/SelectDepartment.vue'
import { annualPlanAdd } from '@/api/office/anualConference/index'
export default {
  name: 'AddAnnualConference',
  components: {
    SelectCompanyAndProject,
    SelectDepartment
  },
  props: {
    visible: {
      type: Boolean,
      default() {
        return true
      }
    }
  },
  data() {
    return {
      formModal: {
        loading: false,
        form: {
          planStatus: 'WRITING',
          year: '',
          unitId: '',
          unitName: '',
          deptId: [],
          dept: []
        },
        rules: {
          year: [{ required: true, message: '请选择年份', trigger: 'blur' }],
          unitId: [{ required: true, message: '请选择编制单位', trigger: 'change' }],
          deptId: [{ required: true, message: '请选择计划参与部门', trigger: 'blur' }]
        }
      }
    }
  },
  computed: {
    showModal() {
      return this.visible
    },
    pageType() {
      return this.$route.query.pageType
    },
    open() {
      return this.$route.query.open
    }
  },
  watch: {
    visible: {
      handler(val, old) {
        if (val) {
          this.$nextTick(() => {
            this.formModal.form.year = this.$dateFormat(new Date(), 'Y')
          })
        }
      }
    }
  },
  mounted() {
    this.formModal.form.year = this.$dateFormat(new Date(), 'Y')
  },
  methods: {
    checkAll(list) {
      const values = list.map((item, index) => {
        return {
          key: item.id,
          label: item.name
        }
      })
      this.formModal.form.deptId = values
    },
    reserveDeptChange(val) {
      const values = val.map((item, index) => {
        return {
          deptId: item.key,
          deptName: item.label
        }
      })
      this.formModal.form.dept = values
    },
    yearChange(val) {
      this.formModal.form.year = this.$dateFormat(val, 'Y')
    },
    cancelSub() {
      let _this = this
      this.$confirm({
        title: '温馨提示',
        content: '现在退出将不会保存已填写信息，是否要退出？',
        onOk() {
          _this.$emit('cancelSub')
        },
        onCancel() {}
      })
    },
    submitForm() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.formModal.loading = true
          const params = {
            ...this.formModal.form
          }
          delete params.deptId
          annualPlanAdd(params)
            .then((res) => {
              this.formModal.loading = false
              if ((res && res.data && res.data.code == 200) || (res && res.code == 200)) {
                this.$message.success('发起成功')
                this.formModal.form.dept = []
                this.formModal.form.deptId = []
                this.formModal.form.year = this.$dateFormat(new Date(), 'Y')
                this.$emit('cancelSub', 'refresh')
              } else {
                this.$message.error('发起失败！')
              }
            })
            .catch(() => {
              this.formModal.loading = false
            })
        } else {
          this.$message.warning("请填写完所有必填项信息")
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.tool-btns .ant-btn {
  margin-left: 12px;
}
</style>
